<template>
  <div id="app"  ref='app1'>
   <router-view  />
   <div class="music-box">
     <div class="control"><img src="@/assets/play.png"  v-if="!showAudio" @click="pause" alt=""></div>
     <div class="control"><img src="@/assets/pause.png" v-if="showAudio" @click="play" alt=""></div>
     <audio id="music"
            ref='audios'
            loop="loop"
            style="opacity:0;"  
            muted
            autoplay  
            preload="auto" 
            controls  >
       <source src="https://gtcp-public-1253428821.cos.ap-guangzhou.myqcloud.com/music.mp3" type="audio/mp3">
       <!-- <embed height="50" width="100" src="@/assets/music/music.mp3"> -->
     </audio>
    </div>
 </div>
</template>
<script>
export default {
  name: 'App',
  components: {
  },
  data(){
    return {
      imgurl:'',
      popupVisible:false,
      showAudio:false
      } 
     },
  mounted(){
    setTimeout(this.autoPlay,1000)
  },
  methods:{
    pause(){
    this.$nextTick(() => {
      var audio = this.$refs.audios;
        this.showAudio=true
        audio.pause();
      })
    },
    play(){
     this.$nextTick(() => {
      var audio = this.$refs.audios;
       this.showAudio=false
       audio.play();
        })
    },
    autoPlay(){
       var audio = this.$refs.audios;
      this.$nextTick(() => {
      audio.play();
      })
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* margin-top: 60px; */
}
.img-box{
  width: 90%;
}
.img-box img{
  width: 100%;
}
.music-box{
  position: fixed;
  top: 15px;
  right: 10px;
  width: 25px;
  height: 25px;
}
.control img{
  width: 100%;
  height: 100%;
  overflow: hidden;;
}
@-webkit-keyframes rotation {
            from {
                -webkit-transform: rotate(0deg);
            }
            to {
                -webkit-transform: rotate(360deg);
            }
        }
      .control {
            -webkit-transform: rotate(360deg);
            animation: rotation 8s linear infinite;
            -moz-animation: rotation 8s linear infinite;
            -webkit-animation: rotation 8s linear infinite;
            -o-animation: rotation 8s linear infinite;
        }

        /* .img {
            border-radius: 200px;
        } */
</style>
